<template>
  <div>
    <!--<img src="./assets/logo.png">-->
    <!--<router-view/>-->
<!--顶部-->
<div class="super-north">
			<div class="super-navigation">
				<!--系统名称-->
				<div class="super-navigation-title">智杰智慧医疗信息平台</div>
				<!--自定义导航-->
				<div class="super-navigation-main">
					<div class="super-setting-left">
						<ul>
							<li><i class="fa fa-commenting-o"></i>消息</li>
							<li><i class="fa fa-envelope-o"></i>邮件</li>
							<li><i class="fa fa-bell-o"></i>通知</li>
						</ul>
					</div>
					<div class="super-setting-right">
						<ul>
							<li>
								<div class="super-setting-icon">
									<i class="fa fa-gears"></i>
								</div>
								<div id="mm" class="easyui-menu menu-noline">
									<div>个人中心</div>
									<div id="themeSetting">主题</div>
									<div class="menu-sep"></div>
									<div id="logout">退出</div>
								</div>
							</li>
							<li class="user">
								<span class="user-icon"><img src="img/favicon.png"/></span>管理员
							</li>
						</ul>
					</div>
				</div>
			</div>
</div>
    <Split style="height: 500px; border: 1px solid #ccc">
      <SplitArea :size="25">
        panel left
      </SplitArea>
      <SplitArea :size="75">
        <iframe src="/" width="99%" height="400px" frameborder="0px"></iframe>
        <!--<router-view/>-->
      </SplitArea>
    </Split>

  </div>
</template>

<script>
import Split from '@/components/split'
// import SplitArea from '@/components/split'
export default {
  name: 'SplitTest',
  components: {
    Split: Split,
    SplitArea: Split.SplitArea
  }
}
</script>

<style>
<link rel="stylesheet" href="../styles/font-awesome.min.css">

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
body{
padding: 0px;
margin: 0px;
}
  .super-north {
    height: 50px;
    background-color: #3498db; }
    
  .super-north .super-navigation {
    height: 50px;
    display: flex;
    justify-content: flex-start; }
  .super-north .super-navigation-title {
    width: 210px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding-left: 40px;
    background-color: #2980b9; }
  .super-north .super-navigation-main {
    height: 50px;
    width: 100%;
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-left: -250px;
    display: flex;
    justify-content: space-between; }
  .super-north .super-navigation-main ul {
    overflow: hidden;
    display: flex;
    justify-content: flex-start; }
  .super-north .super-navigation-main li {
    height: 50px;
    min-width: 45px;
    cursor: pointer;
    transition: background-color .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px; }
  .super-north .super-navigation-main li:hover {
    background-color: #0092dc; }
  .super-north .super-setting-left {
    margin-left: 250px; }
  .super-north .super-setting-left li {
    height: 50px;
    font-size: 12px;
    flex-direction: column; }
  .super-north .super-setting-left li .fa {
    display: block;
    font-size: 20px;
    margin-bottom: 4px; }
  .super-north .super-setting-right .user-icon {
    margin-right: 5px; }
  .super-north .super-setting-right .user-icon img {
    width: 30px;
    height: 30px;
    border-radius: 50%; }

  .super-north .super-navigation-main ul {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }


  .menu-item {
    border-color: transparent;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
  }

  .menu-noline .menu-line {
    display: none;
  }
  .menu-line {
    border-left: 1px solid #ccc;
    border-right: 1px solid #fff;
  }
  .menu-noline .menu-sep {
    margin-left: 0;
    margin-right: 0;
  }

</style>
